<template>
  <div class="flow-table">
    <div class="btn-list">
      <div v-for="(item, index) in btnData" :key="index" class="btn-item">
        <a
          :class="clickIndex === -1 && item.fun !== 'newAdd'?'':'h-a'"
          @click="handleBtnClick(item.fun)"
        >
          <img v-show="clickIndex !== -1 || item.fun === 'newAdd'" :src="'/statics/icons/app/'+ item.icon +'.png'">
          <img v-show="clickIndex === -1 && item.fun !== 'newAdd'" :src="'/statics/icons/app/'+ item.icon2 +'.png'">
        </a>
        <span @click="handleBtnClick(item.fun)">{{item.name}}</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="table ov" style="height:384px">
      <div class="table-line">
        <div v-for="(item,index) in columns" :key="index"></div>
      </div>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :bordered="true"
        :pagination="false"
      >
        <span
          slot="order"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          @click="handleTableClick(record,index)"
        >{{ index + 1 }}
        </span>
        <span
          slot="name"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          style="display: flex;align-items: center;"
          @click="handleTableClick(record,index)"
        >
          <img
            v-if="record.keyValue"
            :src="'statics/images/sysml/'+ record.keyValue.replace(' ','') +'.svg'"
            style="height:16px;width:16px"
          >
          <span style="margin-left:2px">{{ text }}</span>
        </span>
        <span
          slot="visibility"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          @click="handleTableClick(record,index)"
        >{{ text }}
        </span>
        <span
          slot="type"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          @click="handleTableClick(record,index)"
        >{{ text }}
        </span>
        <span
          slot="default"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          @click="handleTableClick(record,index)"
        >{{ text }}
        </span>
        <span
          slot="direction"
          slot-scope="text, record,index"
          class="table-span"
          :class="{active: clickIndex === index}"
          @click.self="handleTableClick(record,index)"
        >
          <!-- <a-select
            v-show="text"
            v-model="text"
            style="width: 80%;height:24px;margin-top: 1px"
            @change="handleChange(index,text,record)"
          >
            <a-select-option
              v-for="(item, i) in record.directionData"
              :key="i"
              :value="item"
            >
              {{item}}
            </a-select-option>
          </a-select> -->
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'flow-table',
  data() {
    return {
      btnData: [
        { name: '新增', icon: 'iconadd2', icon2: 'iconadd2', fun: 'newAdd' },
        { name: '删除', icon: 'icondelete2', icon2: 'icondelete3', fun: 'delete' }
        //// {name:'上移',icon:'iconup2',icon2:'iconup3',fun:'moveUp'},
        //// {name:'下移',icon:'icondown2',icon2:'icondown3',fun:'moveDown'}
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 40,
          scopedSlots: { customRender: 'order' },
        },
        {
          title: '名称',
          dataIndex: 'name',
          width: 98,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '可见性',
          width: 98,
          dataIndex: 'visibility',
          scopedSlots: { customRender: 'visibility' },
        },
        {
          title: '类型',
          width: 98,
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '默认值',
          width: 98,
          dataIndex: 'default ',
          scopedSlots: { customRender: 'default' },
        },
        {
          title: '方向',
          width: 98,
          dataIndex: 'direction',
          scopedSlots: { customRender: 'direction' },
        }
      ],
      tableData: [
        {
          name: "流属性1",
          visibility: '公共',
          type: 'int',
          keyValue: 'Flow Property',
          default: '',
          key: 1,
          direction: '如向',
          directionData: ['未定义', '如向', '出向', '双向']
        }, {
          name: "流属性2",
          visibility: '公共',
          type: 'int',
          keyValue: 'Flow Property',
          default: '',
          key: 2,
          direction: '未定义',
          directionData: ['未定义', '如向', '出向', '双向']
        }, {
          name: "流属性3",
          visibility: '公共',
          type: 'int',
          keyValue: 'Flow Property',
          default: '',
          key: 3,
          direction: '出向',
          directionData: ['未定义', '如向', '出向', '双向']
        }
      ],
      clickIndex: -1
    };
  },
  methods: {
    handleChange(index, value, data) {
      data.direction = value;
      this.$set(this.tableData, data, index );
    },
    handleTableClick(data, index) {
      this.clickIndex = index;
    },
    handleBtnClick(type) {
      if ( type !== "newAdd" && this.clickIndex < 0 ) {
        return;
      }
      this[type]();
    },
    newAdd() {
      let key = this.tableData.length > 0 ? this.tableData[this.tableData.length - 1].key + 1 : 0;
      let obj = {
        name: "",
        visibility: '',
        type: '',
        keyValue: '',
        default: '',
        order: 1,
        key,
        direction: '',
        directionData: []
      };
      this.tableData.push(obj);
    },
    delete() {
      if ( this.tableData.length <= 0 ) {
        this.clickIndex = -1;
        return;
      }
      this.tableData.splice(this.clickIndex, 1);
      if ( this.tableData.length === this.clickIndex) {
        this.clickIndex --;
      } else {
        //// this.clickIndex = this.clickIndex;
      }

    },
    moveUp() {
      if ( this.clickIndex === 0) {
        return;
      }
      this.tableData.splice(this.clickIndex - 1, 0, (this.tableData[this.clickIndex]));
      this.tableData.splice(this.clickIndex + 1, 1);
      this.clickIndex --;
    },
    moveDown() {
      if ( this.clickIndex === this.tableData.length - 1) {
        return;
      }
      this.tableData.splice(this.clickIndex + 2, 0, (this.tableData[this.clickIndex]));
      this.tableData.splice(this.clickIndex, 1);
      this.clickIndex ++;
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~statics/styles/flex.scss';

.flow-table {
  .btn-list {
    overflow: hidden;
    padding: 8px 10px;
    .btn-item {
      float: left;
      font-size: 12px;
      color: #5a5a5a;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      margin:0 8px;
      &:first-child {
        margin-left: 0;
      }
      &:last-child .line {
        display: none;
      }
      a {
        @extend .flex;
        @extend .align-center;
      }
      .line {
        position: absolute;
        right: -9px;
        height: 10px;
        width: 1px;
        top: 5px;
        background-color: #5a5a5a;
        cursor: default;
      }
    }
  }
  .table {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(240,240,240,1);
  }
  .table-line {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    div {
      border-right: 1px solid rgba(240,240,240,1);
      flex: 1;
      &:first-child {
        width: 40px;
        flex: inherit;
      }
      &:last-child {
        opacity: 0;
        filter:alpha(opacity=0)
      }
    }
  }
  .table-span {
    background: #ffffff;
    width: 100%;
    height: 100%;
    padding: 0 5px;
    display: flex;
    align-items: center;
  }
  .active {
    background-color: #3483B8FF;
    color: #ffffff;
  }
}
</style>
<style scoped>
 .flow-table /deep/.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 5px 4px !important;
    background:rgba(255,255,255,1)!important;
    border-color: rgba(240,240,240,1) !important;
  }
  .flow-table /deep/ .ant-table table {
    border-radius: 0;
    border-left: 0 !important;
    border-top: 0;
  }
  .flow-table /deep/.ant-table-thead > tr > th {
    color: #000000FF;
    font-weight: 600;
  }
  .flow-table /deep/.ant-table-thead > tr:first-child > th:last-child {
    border-radius: 0;
  }
  .flow-table /deep/ .ant-table-row-cell-break-word {
    height: 28px !important;
  }
  .flow-table /deep/.ant-select-selection--single {
    height: 24px;
  }
  .flow-table /deep/.ant-select-selection__rendered  {
    line-height: 24px !important;
    margin-left: 4px !important;
  }
  .flow-table /deep/ .ant-table-row-cell-break-word {
    padding: 0 !important;
  }
  .flow-table /deep/.ant-table-placeholder {
    display: none !important;
  }
  .flow-table /deep/.ant-table-row-cell-break-word {
    border-right: 1px solid #e8e8e8 !important;
}
</style>
<style>
.ant-select-dropdown {
  z-index: 99999 !important;
  border-radius: 0px
}
</style>
